class setBanner{
    constructor(element,array){
        this.ele = element;
        this.arr = array;

        this.ul = this.ele.querySelector('ul');
        this.ol = this.ele.querySelector('ol');

        this.ullis;
        this.ollis;
        this.length = this.arr.length;
        this.liWidth;
        this.index = 1 ;
        this.intVal;
        this.bool = true;
    }

    init(){
        this.setPage();
        this.autoLoop();
        this.setMouse();
        this.setClick();
        this.hid();
    }

    setPage(){
        let ulStr = '';
        let olStr = '';

        this.arr.forEach(function(item,key){
            ulStr += `<li><img src="../images/${item.name}"></li>`;
            olStr += key === 0 ? `<li class="active" name="focus" num="${key}"></li>` : `<li name="focus" num="${key}"></li>`;

        })
        
        this.ul.innerHTML = ulStr;
        this.ol.innerHTML = olStr;

        this.ullis = this.ele.querySelectorAll('ul>li');
        this.ollis = this.ele.querySelectorAll('ol>li');

        const first = this.ullis[0].cloneNode(true);
        const last = this.ullis[this.length - 1].cloneNode(true);

        this.ul.appendChild(first);
        this.ul.insertBefore(last , this.ullis[0]);

        this.liWidth = this.ullis[0].offsetWidth;

        this.ul.style.width = this.liWidth * (this.length + 2) + 'px';

        this.ul.style.left = - this.liWidth + 'px';
    }

    autoLoop(){
        this.intVal = setInterval(() =>{
            this.index++;
            this.setFocusStyle();
            move(this.ul,{left:-this.liWidth * this.index},this.moveEndFun.bind(this));
        },3000)
    }

    moveEndFun(){
        if(this.index === this.length + 2 - 1){
            this.index = 1;
            this.ul.style.left = - this.liWidth * this.index + 'px';
        }else if(this.index === 0){
            this.index = this.length;
            this.ul.style.left = - this.liWidth * this.index + 'px';
        }
        this.bool = true;
    }

    setFocusStyle(){
        this.ollis.forEach((item,key)=>{
            item.classList.remove('active');

            if(key === this.index - 1){
                item.classList.add('active');
            }
        })

        if(this.index === this.length + 2 - 1){
            this.ollis[0].classList.add('active');
        }else if(this.index === 0){
            this.ollis[this.length - 1].classList.add('active');
        }

    }

    setMouse(){
        this.ele.addEventListener('mouseenter',()=>{
            clearInterval(this.intVal);
        })
        this.ele.addEventListener('mouseleave',()=>{
            this.autoLoop();
        })
    }

    setClick(){
        this.ele.addEventListener('click',e=>{
            if(e.target.getAttribute('name') === 'left'){
                if(this.bool){
                    this.bool = false;
                }else{
                    return;
                }

                this.index--;
                this.setFocusStyle();
                move(this.ul,{left:-this.liWidth * this.index},this.moveEndFun.bind(this));
            }else if (e.target.getAttribute('name') === 'right') {
                // 防止点击过快
                if (this.bool) {
                    this.bool = false;
                } else {
                    return;
                }
                this.index++;
                this.setFocusStyle();
                move(this.ul, { left: -this.liWidth * this.index }, this.moveEndFun.bind(this));
            }else if(e.target.getAttribute('name') === 'focus'){
                if(this.bool){
                    this.bool = false;
                }else{
                    return;
                }
                this.index = e.target.getAttribute('num') - 0 + 1;
                this.setFocusStyle();
                move(this.ul, { left: -this.liWidth * this.index }, this.moveEndFun.bind(this));

            }
        })
    }

    hid(){
        document.addEventListener('visibilitychange',()=>{
            if(document.visibilityState === 'hidden'){
                clearInterval(this.intVal);
            }else if(document.visibilityState === 'visible'){
                this.autoLoop();
            }
        })
    }
}





